<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            margin: 100px auto;
        }

        span {
            width: 90px;
            height: 100px;
            display: block;
            float: left;
            background: #444;
            margin: 0 5px;
            font-size: 50px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <div>
        <span class="span1">00</span>
        <span class="span2">16</span>
        <span class="span3">45</span>
    </div>
</body>
<script>
    var span1 = document.querySelector('.span1');
    var span2 = document.querySelector('.span2');
    var span3 = document.querySelector('.span3');
    function saa() {
        span3.innerHTML--;
        if (span3.innerHTML < 10 && span3.innerHTML >= 0) {
            span3.innerHTML = '0' + span3.innerHTML;
        } else if (span3.innerHTML < 0) {
            span3.innerHTML = 59;
            span2.innerHTML--;
            if (span2.innerHTML < 10 && span2.innerHTML >= 0) {
                span2.innerHTML = '0' + span2.innerHTML;
            } else if (span2.innerHTML < 0) {
                span2.innerHTML = 59;
                span1.innerHTML--;
                if (span1.innerHTML < 10) {
                    span1.innerHTML = '0' + span1.innerHTML;
                }
            }
        }
        if (span1.innerHTML == 0 && span2.innerHTML == 0 && span3.innerHTML == 0) {
            clearInterval(time);
        }
    }
    var time = setInterval(saa, 1);

</script>

</html>